<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>闲置应用邮件通知</title>
    <style>
      body {
        background-color: #f7fafc;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
      }
      .card {
        background-color: #ffffff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        overflow: hidden;
        width: 90%;
        max-width: 800px;
      }
      /* 标题部分 */
      .header {
        background-color: #2d3959;
        color: white;
        padding: 10px;
        border-radius: 10px 10px 0 0;
      }
      .container {
        display: flex;
        align-items: center;
        padding: 20px;
      }
      .logo {
        width: 50px;
        height: 50px;
        margin-right: 20px;
      }
      .text-container {
        color: white;
      }
      .text-container h1 {
        margin: 0;
        font-size: 24px;
        font-weight: normal;
      }
      .text-container a {
        color: #d3d3d3 !important;
        text-decoration: none !important;
      }
      .text-container p {
        margin: 5px 0 0;
        font-size: 16px;
        color: #d3d3d3;
      }
      /* 内容部分 */
      .content {
        padding: 20px;
      }
      .content h2 {
        display: inline-block;
        font-size: 1.25em;
        margin: 0 0 10px;
        font-weight: 500;
      }
      .content p {
        color: #a9a9a9;
        font-size: 0.9em;
        margin: 5px 0;
      }
      .hollow-button {
        padding: 8px 10px;
        font-size: 1em;
        text-align: center;
        text-decoration: none !important;
        color: #3496f7;
        border-width: 1px;
        border-style: solid;
        border-color: #3496f7;
        border-radius: 5px;
      }
      .refs {
        padding-left: 0.5rem;
        border-left-width: 5px;
        border-left-style: solid;
        border-color: #759ced;
        font-weight: normal;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
      }
      th,
      td {
        padding: 10px;
        border: none;
        border-bottom: 1px solid #e2e8f0;
        text-align: left;
        font-size: 0.9em;
        font-weight: normal;
      }
      th {
        background-color: #f7fafc;
        color: #4a5568;
      }
      .button-container {
        text-align: center;
        margin-top: 20px;
      }
      .button {
        display: inline-block;
        padding: 8px 50px;
        font-size: 1em;
        text-align: center;
        text-decoration: none !important;
        color: white;
        background-color: #3496f7;
        border: none;
        border-radius: 20px;
      }
      .button:hover {
          background-color: #1f78d1;
      }
      .bk-app {
        background-color: #f1f3f4;
        font-weight: bold;
      }
      .bk-app-code {
        color: #9ba2b1;
      }
      .bk-app-module {
        color: #585c63;
      }
      .bk-app-module td {
        color: #767676;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="header">
        <div class="container">
          <img class="logo" alt="logo" src="">
          <div class="text-container">
            <h1>蓝鲸开发者中心</h1>
            <p>{{ bkpaas_url }}</p>
          </div>
        </div>
      </div>
      <div class="content">
        <div>
          <h2>你当前有 {{ idle_cnt }} 个应用有闲置模块，请下架闲置模块或标记为忽略提醒！</h2>
          <a class="hollow-button" href="{{ bkpaas_url }}">去处理</a>
        </div>
        <p>闲置模块定义：近 30 天没有访问记录，CPU 使用率低于 1% 且近 7 天无波动</p>
        <p>可选操作：下架（推荐）/ 忽略提醒（如果该模块仍需使用）</p>
        <h4 class="refs">模块情况</h4>
        <table>
          <thead>
            <tr>
              <th>闲置模块</th>
              <th>环境</th>
              <th>资源配额</th>
              <th>CPU 使用率（7d）</th>
              <th>最近部署时间</th>
            </tr>
          </thead>
          <tbody>
            {% for app in idle_apps %}
            <tr class="bk-app">
              <td colspan="5">
                {{ app.name }} <span class="bk-app-code"> ({{ app.code }}) </span>
              </td>
            </tr>
            {% for mod_env in app.module_envs %}
            <tr class="bk-app-module">
              <td>{{ mod_env.module_name }}</td>
              <td>{{ mod_env.environment }}</td>
              <td>{{ mod_env.res_summary }}</td>
              <td>{{ mod_env.cpu_usage_avg }}</td>
              <td>{{ mod_env.latest_deployed_at }}</td>
            </tr>
            {% endfor %}
            {% endfor %}
          </tbody>
        </table>
        <div class="button-container">
          <a class="button" href="{{ bkpaas_url }}">去处理</a>
        </div>
      </div>
    </div>
  </body>
</html>
